<template>
  <div class="three-box" id="three-box"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
// import Stat from 'three/examples/jsm/libs/stats.module' //查看three.js性能的插件

let { proxy } = getCurrentInstance();
let THREE = proxy.$THREE;

onMounted(() => {
  initThree();
});

// const stat = new Stat()

const scene = new THREE.Scene();

const axes = new THREE.AxesHelper(2, 2, 2);

const renderer = new THREE.WebGLRenderer();

const g = new THREE.BoxGeometry(1, 1, 1);
const m = new THREE.MeshBasicMaterial();
const cube = new THREE.Mesh(g, m);

const clock = new THREE.Clock();

const initThree = () => {
  const threeBox = document.getElementById("three-box");

  const camera = new THREE.PerspectiveCamera(
    75,
    threeBox.clientWidth / threeBox.clientHeight,
    0.1,
    100
  );
  scene.add(axes);

  renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);

  camera.position.set(1, 3, 5);
  camera.lookAt(0, 0, 0);
  threeBox.appendChild(renderer.domElement);
  // threeBox.appendChild(stat.domElement)

  renderer.render(scene, camera);

  // stat.update()
  initGeometry();

  function initGeometry() {
    const time = clock.getElapsedTime();
    
    cube.position.x = Math.sin(time)*1.5;
    cube.position.y = Math.cos(time)*1.5;

    scene.add(cube);

    requestAnimationFrame(initGeometry);

    renderer.render(scene, camera);
  }
};
</script>

<style>
.three-box {
  position: fixed;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0;
  width: 100%;
}
</style>
